import * as echarts from 'echarts';
import ResponsiveLayout from 'react-grid-layout';

// 物料项类型
export interface WidgetMaterial {
  uuid?: string | number; // 网格区唯一标识
  id: number; // 物料唯一标识
  type: string; // 物料类型（如 'chart'、'table'）
  name: string; // 物料名称
  title?: string; // 物料标题
  img: string; // 物料图片
  icon?: React.ReactNode | string; // 物料图标
  initialW: number; // 初始宽度
  initialH: number; // 初始高度
  pt: { top: number; left: number }; // 物料类型定位
  t: { top: number; left: number }; // 物料类型顶部中间按钮
  r: { top: number; left: number }; // 物料类型右侧中间按钮
  b: { top: number; left: number }; // 物料类型底部中间按钮
  l: { top: number; left: number }; // 物料类型左侧中间按钮
  lt: { top: number; left: number }; // 物料类型左侧顶角按钮
  rt: { top: number; left: number }; // 物料类型右侧顶角按钮
  rb: { top: number; left: number }; // 物料类型右侧底角按钮
  lb: { top: number; left: number }; // 物料类型左侧底角按钮
  material?: React.ReactNode; // 物料组件
}

// 画布中组件的状态（整合布局和业务属性）
export interface CanvasWidget extends WidgetMaterial {
  layout: ResponsiveLayout; // 布局信息（x, y, w, h, i）
  // 可扩展业务属性（如颜色、内容等）
  props?: Record<string, any>;
}

// 网格内组件实例状态
export interface GridWidget extends WidgetMaterial {
  gridId: string; // 网格内唯一标识（区分同一物料的多个实例）
  x: number; // 位置 X 坐标
  y: number; // 位置 Y 坐标
  width: number; // 宽度
  height: number; // 高度
  rotation: number; // 旋转角度（度）
  zIndex: number; // 层级（可选）
}

// 网格区域配置
export interface GridConfig {
  cellSize: number; // 网格单元格大小（用于吸附）
  rows: number; // 网格行数
  cols: number; // 网格列数
}

export type textData = {
  text: string;
};

export type imageType = {
  url: string;
};

export type chartData = {
  chart: echarts.EChartsOption;
};

// 物料拉伸类型
export interface ResizeType {
  active?: boolean; // 是否激活
  itemId: number | null | string | undefined; // 物料项 ID
  position: keyof WidgetMaterial | null; // 拉伸位置
  startX: number; // 开始 X 坐标
  startY: number; // 开始 Y 坐标
  startWidth: number; // 开始宽度
  startHeight: number; // 开始高度
  startLeft: number; // 开始左边距
  startTop: number; // 开始上边距
}
export interface actionState {
  item: WidgetMaterial;
  offset: {
    x: number;
    y: number;
  };
}

export type RulerContentState = {
  ruler?: { scales: number };
  mousePositions?: MousePosition[];
};

export interface MousePosition {
  type: string;
  visible: boolean;
  value: number;
  x: number;
  y: number;
}
